<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  value?: number // 当前值
  critical?: number // 危险值
  urgent?: number // 紧急值
  nonUrgent?: number // 非紧急值
  criticalCount?: number
  urgentCount?: number
  nonUrgentCount?: number
  normalCount?: number
  height?: string | number // 新增高度属性
}

const props = withDefaults(defineProps<Props>(), {
  value: 0,
  critical: 5,
  urgent: 15,
  nonUrgent: 40,
  criticalCount: 0,
  urgentCount: 1,
  nonUrgentCount: 0,
  normalCount: 1,
  height: '200px' // 默认高度
})

// 计算指示箭头位置
const getArrowPosition = () => {
  return `${props.value}%`
}

// 计算根元素字体大小
const containerRef = ref<HTMLElement | null>(null)
const updateFontSize = () => {
  if (containerRef.value) {
    const width = containerRef.value.offsetWidth
    // 根据容器宽度动态设置基准字体大小
    containerRef.value.style.fontSize = `${width / 100}px`
  }
}

onMounted(() => {
  updateFontSize()
  window.addEventListener('resize', updateFontSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateFontSize)
})
</script>

<template>
  <div class="ruler-container" 
       ref="containerRef"
       :style="{ height: typeof height === 'number' ? `${height}px` : height }">
    <!-- 标尺主体 -->
    <div class="ruler">
      <!-- 状态标签 -->
      <div class="status-labels">
        <span class="status critical">Critical</span>
        <span class="status urgent">Urgent</span>
        <span class="status non-urgent">Non-Urgent</span>
        <span class="status normal">Normal</span>
      </div>

      <!-- 颜色区域 -->
      <div class="color-zones">
        <div class="zone critical"></div>
        <div class="zone urgent"></div>
        <div class="zone non-urgent"></div>
        <div class="zone normal"></div>
      </div>
      
      <!-- 刻度和标签 -->
      <div class="scale-container">
        <div class="scale-marks"></div>
        <div class="scale-labels">
          <span class="label">0%</span>
          <span class="label" style="left: 5%">5%</span>
          <span class="label" style="left: 15%">15%</span>
          <span class="label" style="left: 40%">40%</span>
          <span class="label" style="right: 0">100%</span>
        </div>
      </div>
    </div>

    <!-- 指示箭头 - 移到下方 -->
    <div class="arrow" :style="{ left: getArrowPosition() }">
      <div class="arrow-up"></div>
      <div class="value-box">{{ value }}%</div>
    </div>

    <!-- 状态统计 -->
    <div class="status-count">
      <div class="count-item critical">
        <div class="count">{{ criticalCount }}</div>
        <div class="label">CRITICAL</div>
      </div>
      <div class="count-item urgent">
        <div class="count">{{ urgentCount }}</div>
        <div class="label">URGENT</div>
      </div>
      <div class="count-item non-urgent">
        <div class="count">{{ nonUrgentCount }}</div>
        <div class="label">NON-URGENT</div>
      </div>
      <div class="count-item normal">
        <div class="count">{{ normalCount }}</div>
        <div class="label">NORMAL</div>
      </div>
      <div class="count-item total">
        <div class="count">{{ criticalCount + urgentCount + nonUrgentCount + normalCount }}</div>
        <div class="label">TOTAL</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ruler-container {
  position: relative;
  width: 100%;
  padding: 1em 1em 5em;
  box-sizing: border-box;
  font-size: 16px; // 基准字体大小，会被JS动态调整
}

.arrow {
  position: absolute;
  bottom: 3em;
  transform: translateX(-50%);
  z-index: 2;
  
  .arrow-up {
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.75em solid #ff6b6b;
  }
  
  .value-box {
    padding: 0.125em 0.5em;
    border-radius: 0.25em;
    font-size: 0.75em;
  }
}

.ruler {
  height: calc(100% - 8em);
  margin-top: 1em;
}

.status-labels {
  display: flex;
  margin-bottom: 5px; // 调整与标尺的间距
  
  .status {
    font-size: 0.75em;
    color: #666;
    
    &.critical {
      width: 5%;
    }
    
    &.urgent {
      width: 10%;
    }
    
    &.non-urgent {
      width: 25%;
    }
    
    &.normal {
      flex-grow: 1;
    }
  }
}

.color-zones {
  height: 1.875em;
  display: flex;
//   border-radius: 10px;
  overflow: hidden;
  
  .zone {
    height: 100%;
    
    &.critical {
      width: 5%;
      background: #ff4444;
    }
    
    &.urgent {
      width: 10%;
      background: #ffa700;
    }
    
    &.non-urgent {
      width: 25%;
      background: #ffeb3b;
    }
    
    &.normal {
      flex-grow: 1;
      background: #4caf50;
    }
  }
}

.scale-container {
  position: relative;
  margin-top: 0.3125em;
  margin-bottom: 2em;
  
  .scale-marks {
    width: 100%;
    height: 0.625em;
    background-size: 1.25em 100%;
  }
  
  .scale-labels {
    position: relative;
    margin-top: 0.5em;
    
    .label {
      position: absolute;
      transform: translateX(-50%);
      font-size: 0.75em;
      color: #666;
      
      &:first-child {
        left: 0;
        transform: translateX(0);
      }
      
      &:last-child {
        transform: translateX(0);
      }
    }
  }
}

.status-count {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translateX(-50%);
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  gap: 1.25em;
//   background-color: #ffeb3b;

  .count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5em;
    
    .count {
      width: 2.5em;
      height: 2.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25em;
      font-weight: bold;
      color: #fff;
      border-radius: 0.25em;
      margin-bottom: 0.3125em;
    }
    
    .label {
      font-size: 0.75em;
      color: #666;
    }

    &.critical .count {
      background-color: #ff4444;
    }
    
    &.urgent .count {
      background-color: #ffa700;
    }
    
    &.non-urgent .count {
      background-color: #ffeb3b;
      color: #666; // 黄色背景使用深色文字
    }
    
    &.normal .count {
      background-color: #4caf50;
    }
    
    &.total .count {
      background-color: #999;
    }
  }
}
</style>
